<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="description" content="">
		<meta name="keywords" content="">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>article with sidebar | Amaze UI Examples</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="Cache-Control" content="no-siteapp" />
		<link rel="icon" type="image/png" href="assets/i/favicon.png">
		<meta name="mobile-web-app-capable" content="yes">
		<link rel="icon" sizes="192x192" href="assets/i/app-icon72x72@2x.png">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-title" content="Amaze UI" />
		<link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
		<meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
		<meta name="msapplication-TileColor" content="#0e90d2">
		<link rel="stylesheet" href="assets/css/amazeui.min.css">
		<link rel="stylesheet" href="assets/css/app.css">
		<!--引入 外部的js文件-->
		<script src="assets/js/baseUrl.js"></script>
		<script src="assets/js/jquery.min.js"></script>
	</head>

	<body id="blog-article-sidebar">
		<!-- header start -->
		<header id="header" class="am-g am-g-fixed blog-fixed blog-text-center blog-header">
			<script type="text/javascript ">
				$("#header").load("common/header.html");
				console.log("加载了header.html文件 ");
			</script>
		</header>
		<!-- header end -->
		<hr>

		<!-- nav start -->
		<nav class="am-g am-g-fixed blog-fixed blog-nav" id="menu">
			<script type="text/javascript">
                $("#menu").load("common/menu.html");
                console.log("加载了菜单menu");
			</script>
		</nav>
		<!-- nav end -->
		<hr>
		<!-- content srart -->
		<div class="am-g am-g-fixed blog-fixed blog-content">
			<div class="am-u-md-8 am-u-sm-12">
				<article class="am-article blog-article-p">
					<div class="am-article-hd">
						<h1 class="am-article-title blog-text-center" id="title">我的文章哎</h1>
						<p class="am-article-meta blog-text-center">
							<span><a href="#" class="blog-color">article &nbsp;</a></span>-
							<span><a href="#">@amazeUI &nbsp;</a></span>-
							<span><a href="#">2015/10/9</a></span>
						</p>
					</div>

					<!--TODO 
						文章内容填充
					-->
					<div class="am-article-bd" id="blogContent">
						<script type="text/javascript">
							var id=getQueryString("id");
							var content;
							$.ajax({
								type: "post",
								url: getArticleDetail,
								async: true,
								data: {"id":id},
								success: function(result) {
										var data= result.data.data;
										console.log(data);
										content=data.articelContent;
										console.log(content);
										console.log(data.articelTitle);
										document.getElementById("blogContent").innerHTML=content;
										document.getElementById("title").innerHTML=data.articelTitle;
								},
								error: function() {
									console.log("请求失败")
								}
							});

							//获取 URL 上附带的参数
							function getQueryString(name) {
								var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
								var r = window.location.search.substr(1).match(reg);
								if(r != null) return unescape(r[2]);
								return null;
							}
						</script>
					</div>
				</article>

				<div class="am-g blog-article-widget blog-article-margin">
					<div class="am-u-lg-4 am-u-md-5 am-u-sm-7 am-u-sm-centered blog-text-center">
						<span class="am-icon-tags"> &nbsp;</span>
						<a href="#">标签</a> ,
						<a href="#">TAG</a> ,
						<a href="#">啦啦</a>
						<hr>
						<a href=""><span class="am-icon-qq am-icon-fw am-primary blog-icon"></span></a>
						<a href=""><span class="am-icon-wechat am-icon-fw blog-icon"></span></a>
						<a href=""><span class="am-icon-weibo am-icon-fw blog-icon"></span></a>
					</div>
				</div>

				<hr>
				<div class="am-g blog-author blog-article-margin">
					<div class="am-u-sm-3 am-u-md-3 am-u-lg-2">
						<img src="assets/i/f15.jpg" alt="" class="blog-author-img am-circle">
					</div>
					<div class="am-u-sm-9 am-u-md-9 am-u-lg-10">
						<h3><span>作者 &nbsp;: &nbsp;</span><span class="blog-color">amazeui</span></h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
					</div>
				</div>
				<hr>
				<ul class="am-pagination blog-article-margin">
					<li class="am-pagination-prev">
						<a href="#" class="">&laquo; 一切的回顾</a>
					</li>
					<li class="am-pagination-next">
						<a href="">不远的未来 &raquo;</a>
					</li>
				</ul>

				<hr>

				<form class="am-form am-g">
					<h3 class="blog-comment">评论</h3>
					<fieldset>
						<div class="am-form-group am-u-sm-4 blog-clear-left">
							<input type="text" class="" placeholder="名字">
						</div>
						<div class="am-form-group am-u-sm-4">
							<input type="email" class="" placeholder="邮箱">
						</div>

						<div class="am-form-group am-u-sm-4 blog-clear-right">
							<input type="password" class="" placeholder="网站">
						</div>

						<div class="am-form-group">
							<textarea class="" rows="5" placeholder="一字千金"></textarea>
						</div>

						<p><button type="submit" class="am-btn am-btn-default">发表评论</button></p>
					</fieldset>
				</form>

				<hr>
			</div>

			<div class="am-u-md-4 am-u-sm-12 blog-sidebar" id="right">
				<script type="text/javascript">
                    $("#right").load("common/right.html");
                    console.log("加载了右边栏 数据")
				</script>
			</div>
		</div>
		<!-- content end -->

		<footer class="blog-footer" id="foot">
			<script type="text/javascript">
				$("#foot").load("common/footer.html");
				console.log("加载了footer.html文件 ");
			</script>

		</footer>

		<!--[if (gte IE 9)|!(IE)]><!-->
		<script src="assets/js/jquery.min.js"></script>
		<!--<![endif]-->
		<!--[if lte IE 8 ]>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
<script src="assets/js/amazeui.ie8polyfill.min.js"></script>
<![endif]-->
		<script src="assets/js/amazeui.min.js"></script>
		<!-- <script src="assets/js/app.js"></script> -->
	</body>

</html>